<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%   
String path = request.getContextPath();   
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
%> 
<!DOCTYPE html>
<html>
<head>
    <title>用户资料</title>
    <base href="<%=basePath%>"> 
    <link rel="shortcut icon" href="<%=basePath%>img/favo.ico">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/todc-bootstrap.css" rel="stylesheet">
    <link href="css/global.css" rel="stylesheet">
    <link href="css/layout.css" rel="stylesheet">
    <link href="css/datetimepicker.css" rel="stylesheet">
    <link href="css/user.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
</head>
<style>

	.add-on.warning{
		background:#F89406;
		border-color:#F89406;
	}
	.add-on.error{
		background:#B94A48;
	}
	.add-on.success{
		background:#468847;
	}
	
	.editor.box{
		margin:auto;
		padding:10px 20px;
	}

	.form-horizontal .controls{
		margin-left:100px;
		width:600px;
	}
	
	.form-horizontal .control-label{
		width:80px;
	}
	.form-horizontal label.text{
		margin:0;
		padding:0;
	}
	
	#msgbox.saved .controls .add-on{display:none;}
	#msgbox.saved .controls input{border:0 none; background:none;}
	#msgbox.saved .controls .add-on.website i{display:none;}
	#msgbox.saved .controls .add-on.website{display:inline-block;background:#FFF;border:0 none;color:#999999;}
</style>

<body>
<jsp:include page="include/topbar.jsp"></jsp:include>
<jsp:include page="include/logobar.jsp"></jsp:include>
<div class="layout grid-s5m0">
	<div class="col-sub">
		<h3>设置</h3>
		<ol class="unstyled">
			<li>
				<a href="user/info.html"><i class="icon-edit"></i>&nbsp;个人资料</a>
			</li>
			<li>
				<a href="user/head.html"><i class="icon-user"></i>&nbsp;修改头像</a>
			</li>
		</ol>
	</div>
	<div class="main-wrap">
		<div id="msgbox" class="editor saved box form-horizontal">

			<div class='form-title'>
				个人资料
			</div>
		    <div class="control-group">
		      <label class="control-label" for="name">职业:</label>
		      <div class="controls" >
		      	<div class="input-prepend">
		       	 <span class="add-on"><i class="icon-book"></i></span>
		         <input id="profession" placeholder="职业" class="input-xlarge" type="text" name="profession" onblur="" value="${sessionScope.user.profession}">
		      	</div>
		      </div>
		    </div>
		    
			<div class="control-group">
		      <label class="control-label" for="name">QQ:</label>
		      <div class="controls" >
		      	<div class="input-prepend">
		       	 <span class="add-on"><i class="icon-comment"></i></span>
		         <input id="qq" placeholder="QQ号码" class="input-xlarge" type="text" name="qq" onblur="" value="${sessionScope.user.qq}">
		      	</div>
		      </div>
		    </div>
		
			<div class="control-group">
	          <label class="control-label">性别:</label>
	          <div class="controls">
	            <select id=gender class="span2" name="gender">
	              <option value='1' <c:if test="${sessionScope.user.gender==1}">selected='selected'</c:if>>男</option>
	              <option value='0' <c:if test="${sessionScope.user.gender==0}">selected='selected'</c:if>>女</option>
	              <option value='2' <c:if test="${sessionScope.user.gender==2}">selected='selected'</c:if>>保密</option>
	            </select>
	          </div>
	
	        </div>

			<div class="control-group">
		      <label class="control-label" for="birthday">生日:</label>
		      <div class="controls" >
		      	<div class="input-prepend ">
		       	 <span class="add-on"><i class="icon-gift"></i></span>
		         <input id="birthday" placeholder="生日" class="input-large" type="text" name="birthday"  readonly value="<fmt:formatDate value="${sessionScope.user.birthday}" type="date" pattern="yyyy-MM-dd"/>">
		         <span class="add-on form_datetime"><i class="icon-th"></i></span>
		      	</div>
		      </div>
		    </div>
		    
		    <div class="control-group">
		      <label class="control-label">自定义网址:</label>
		      <div class="controls">
		        <div class="input-prepend input-append">
		          <span class="add-on website"><i class="icon-globe"></i>&nbsp;http://www.askme.com.cn/</span>
		          <input id="privateUrl" name="privateUrl" placeholder="自定义网址" type="text" class="span2 input-xlarge"  onblur="" value="${sessionScope.user.privateUrl}">
		        </div>
		        <p class="help-block" id="purl-info" style="color:red"></p>
		      </div>
		    </div>
		
			<div class="control-group">
		       <div class="controls">
		         <button id="submit-btn" class="btn btn-success" onclick="changeStatus(this)">保存</button>
		       </div>
		     </div>

		</div>
	</div>
</div>

 
<script type="text/javascript">
$(".form_datetime").datetimepicker({
	format: 'yyyy-mm-dd',
	autoclose:true,
	 linkField: "birthday",
	 linkFormat: "yyyy-mm-dd",
	 minView: "month"
	});
</script> 
<script type="text/javascript">
$(document).ready(function(){
	$("#msgbox").addClass("saved");
	$("#submit-btn").html("修改");
	$("#msgbox input[type=text]").each(function(i,e){
		if($(e).val()==''){
			$(e).val("未填写");
		}
		$(e).attr("readonly",true);
	});
	
	$("#msgbox select").each(function(i,e){
		$(e).attr("disabled","disabled");
	});
	
});

	function changeStatus(){
		if($("#msgbox").hasClass("saved")){
			changeToEditor();
		}else{
			save();
		}
	}
	
	function changeToEditor(){
		if($("#msgbox").hasClass("saved")){
			$("#msgbox").removeClass("saved");
			$("#submit-btn").html("保存");
		
			$("#msgbox input[type=text]").each(function(i,e){
				if($(e).val()=='未填写'){
					$(e).val("");
				}
				$(e).attr("readonly",false);
			});
			$("#birthday").attr("readonly",true);
			
			$("#msgbox select").each(function(i,e){
				$(e).removeAttr("disabled");
			});
			
		}
	}
	
	function changeToSaved(){
		$("#msgbox").addClass("saved");
		$("#submit-btn").html("修改");
		$("#msgbox input[type=text]").each(function(i,e){
			if($(e).val()==''){
				$(e).val("未填写");	
			}
			$(e).attr("readonly",true);
		});
		
		$("#msgbox select").each(function(i,e){
			$(e).attr("disabled","disabled");
		});
	}
	
	function save(){
		var profession = $("#profession").val();
		var birthday = $("#birthday").val();
		var qq = $("#qq").val();
		var privateUrl = $("#privateUrl").val();
		var gender = $("#gender").val();
	    var t=/^[a-zA-Z0-9]+$/;
		if(privateUrl.length!=0 && privateUrl.length<6){
			$("#purl-info").html("至少要6个字符");
			return;
		}
		if(privateUrl.length!=0 && !t.test(privateUrl)){
			$("#purl-info").html("只能为字母或数字");
			return;
		}
		$("#purl-info").html("");
		var data = {profession:profession,birthday:birthday,qq:qq,gender:gender,privateUrl:privateUrl};

		$.ajax({    
	        type: "post",  
	        url:"<%=basePath%>user/infosave.json",
	        contentType : 'application/json',
            data:JSON.stringify(data),
            dataType:'json',
	        success: function(response){
				if(response.ok){
					changeToSaved();
				}
				if(!response.ok){
					if(response.msg==='urlexist'){
						$("#purl-info").html("该地址已经被占用");
					}
				}
	        },
	        error: function(e){}
		});
	}
</script>
<jsp:include page="include/foot.jsp"></jsp:include>
</body>
</html>